<template>
  <div class="operatorsCode">
    <van-nav-bar
        :title="$route.query.title"
        left-arrow
        @click-left="$router.go(-1)"
    />
    <div style="padding: 10px" v-if="!sendCodeStatus">
      <div class="tips">
        {{ $t('get_autho_code') }}
      </div>
      <van-field
          v-if="!sendCodeStatus"
          style="border-radius: 5px;padding: 8px"
          center
          clearable
          :placeholder="$t('hint_input_identifying_code')"
          v-model="code1"
      >
        <template #button>
          <van-button v-if="!codeShow" size="small" type="primary" @click="sendCode1">{{ $t('send_code') }}</van-button>
          <van-button v-else size="small" type="default" style="padding: 0 20px">{{ codeNum }}s</van-button>
        </template>
      </van-field>
      <van-field
          v-else
          style="border-radius: 5px;padding: 8px"
          center
          clearable
          :placeholder="$t('hint_input_identifying_code')"
          v-model="code2"
      >
        <template #button>
          <van-button v-if="!codeShow" size="small" type="primary" @click="sendCode1">{{ $t('send_code') }}</van-button>
          <van-button v-else size="small" type="default" style="padding: 0 20px">{{ codeNum }}s</van-button>
        </template>
      </van-field>
      <div class="confirm">
        <button @click="next">{{ $t('next') }}</button>
      </div>
    </div>
    <div style="padding: 10px" v-else>
      <div class="tips">
        {{ $t('again_get_autho_code') }}
      </div>
      <van-field :placeholder="$t('hint_input_identifying_code')"/>
      <div class="confirm">
        <button @click="confirm()">{{ $t('finish') }}</button>
      </div>

    </div>
  </div>
</template>

<script>

import {ref} from "vue";
import {operatorSend_Code1, operatorSend_Code2, submit_code2} from '@/api/home'
import router from "@/router";

export default {

  setup() {
    let sendCodeStatus = ref(false)
    let codeNum = ref(60)
    let codeTimer = ref(null)
    let codeShow = ref(false)
    const code1 = ref('')
    const code2 = ref('')
    const sendCode1 = async () => {
      const {title} = router.currentRoute.value.query
      const res = await operatorSend_Code1({
        company: title
      })
      if (res.code === 1) {
        codeShow.value = true
        codeTimer.value = setInterval(() => {
          codeNum.value--
          if (codeNum.value === 0) {
            codeNum.value = 60
            codeShow.value = false
            clearInterval(codeTimer.value)
          }
        }, 1000)
      }
    }
    const next = async () => {
      const {title} = router.currentRoute.value.query
      const res = await operatorSend_Code2({
        company: title,
        otp: code1
      })
      if (res.code === 1) {
        sendCodeStatus.value = true
      }
    }
    const confirm = async () => {
      const {title} = router.currentRoute.value.query
      const res = await submit_code2({
        company: title,
        otp: code2
      })
      if (res.code === 1) {
        router.push('/bankCardInfo')
      }
    }
    return {
      next,
      sendCode1,
      sendCodeStatus,
      codeNum,
      codeTimer,
      codeShow,
      confirm,
      code1,
      code2
    }
  }
}
</script>

<style lang="less" scoped>
.operatorsCode {
  background-color: #f2f3f5;
  overflow: auto;

  ::v-deep .van-nav-bar {
    background: linear-gradient(90deg, #FF5252, #FF8244) !important;
    z-index: 1999;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #333333 !important;
  }

  .tips {
    text-align: center;
    font-size: 13px;
    color: #FF5252;
    margin-bottom: 10px;
  }

  .confirm {
    margin-top: 20px;
    text-align: center;

    button {
      width: 300px;
      padding: 10px 0;
      color: #ffffff;
      border: none;
      font-size: 16px;
      background: linear-gradient(-45deg, #FF5252, #FF8C3C);
      box-shadow: 0px 4px 10px 0px rgba(255, 92, 78, 0.52);
      border-radius: 29px;
    }

  }

}
</style>
